<template>
	<view :style="{ paddingTop: safeAreaTop + 'px' }">
		<up-navbar title="个人解读" :autoBack="true" />
		<view class="mt-2">
			<view class="flex-r a-c s-b pl-2 pr-2">
				<view class="flex-r a-c">
					<up-avatar size="50" text="北" fontSize="18" randomBgColor></up-avatar>
					<view class="personal-info ml-1 flex-c">
						<view>xxxtz</view>
						<text>1986.12.23 北京市海定区</text>
					</view>
				</view>
				<text class="iconfont icon-qiehuandangan" />
			</view>
			<view class="flex-r s-b m-1">
				<view class="ai-dialogue flex-r s-b a-c p-1"
					@click="handleTo('/pages/home/components/personalMap/AIdialogue')">
					<view class="flex-r a-c">
						<text class="iconfont icon-zhinengAi- mr-1" />
						AI解读对话
					</view>
					<text class="iconfont icon-youjiantou" />
				</view>
				<view class="ai-dialogue ai-dialogue2 flex-r s-b a-c p-1"
					@click="handleTo('/pages/home/components/personalMap/autonomous?nikename=xxxtz')">
					<view class="flex-r a-c">
						<text class="iconfont-color icon-zizhujiedu mr-1" />
						自主解读
					</view>
					<text class="iconfont icon-youjiantou" />
				</view>
			</view>
			<view class="m-1">
				<view class="cate-item mb-1">
					<view class="title flex-r s-b a-c mb-1">
						<view>事业</view>
						<text>90分</text>
					</view>
					<text class="description">适合需要深度思考和创新的职业，但需提升行动能力</text>
				</view>
				<view class="cate-item mb-1 bgc1">
					<view class="title flex-r s-b a-c mb-1">
						<view>财富</view>
						<text>90分</text>
					</view>
					<text class="description">适合需要深度思考和创新的职业，但需提升行动能力</text>
				</view>
				<view class="cate-item mb-1 bgc2">
					<view class="title flex-r s-b a-c mb-1">
						<view>性格</view>
						<text>8.5分</text>
					</view>
					<text class="description">适合需要深度思考和创新的职业，但需提升行动能力</text>
				</view>
				<view class="cate-item mb-1 bgc3">
					<view class="title flex-r s-b a-c mb-1">
						<view>感情</view>
						<text>8.5分</text>
					</view>
					<text class="description">适合需要深度思考和创新的职业，但需提升行动能力</text>
				</view>
				<view class="cate-item mb-1 bgc4">
					<view class="title flex-r s-b a-c mb-1">
						<view>总结</view>
					</view>
					<text
						class="description">你在事业和性格领域表现突出，适合需要逻辑思维和创造力的职业，同时具有强大的适应能力。在财富和感情&nbsp;领域，需注意平衡理性与冒险、情感表达与亲密连接。在&nbsp;健康&nbsp;领域，建议通过理性规划和多样化方式保持身心平衡。总体而言，你的生命主题是通过内在探索和个人成长找到自己的方向和使命。</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const safeAreaTop = uni.$safeArea?.safeAreaTop || 44;
	const handleTo = (url) => {
		uni.navigateTo({
			url
		})
	}
</script>

<style lang="scss" scoped>
	.personal-info {
		view {
			font-size: 34rpx;
			font-weight: 600;
			line-height: 48rpx;
		}

		text {
			font-size: 20rpx;
			color: #6F6F6F;
		}
	}

	.ai-dialogue {
		width: 344rpx;
		height: 100rpx;
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
		border-radius: 12rpx;
		background-color: #8681FF;
		box-sizing: border-box;

		.iconfont,.iconfont-color {
			margin-left: 10rpx;
			font-size: 28rpx;
		}
	}

	.ai-dialogue2 {
		background-color: #FF9281;
	}

	.cate-item {
		background: linear-gradient(90deg, #DDE9FF 0%, #EFF3FE 100%);
		border-radius: 20rpx;
		padding: 30rpx;

		.title {
			view {
				font-weight: bold;
				font-size: 36rpx;
			}

			text {
				line-height: 40rpx;
				font-size: 28rpx;
				color: #F63800;
				background-color: #FFEBE5;
				padding: 0 20rpx;
				border-radius: 28rpx;
			}
		}

		.description {
			font-size: 26rpx;
			line-height: 40rpx;
		}
	}

	.bgc1 {
		background: linear-gradient(90deg, #FBECCD 0%, #FFF9EE 100%);
	}

	.bgc2 {
		background: #F4F8FE;
	}

	.bgc3 {
		background: #FFF7FF;
	}

	.bgc4 {
		background: #FFE4DB;
	}
</style>